<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org" >
    <div th:include="header"/>
    <link rel="stylesheet" href="assets/css/pay.css">

    <body data-spy="scroll" data-target=".navbar-collapse" style="background:#f1f2f7">

        <div class="culmn">
            <!--Home page style-->
            <div th:include="nav::nav" />

            <section id="features" class="features">
                <div class="container">
                    <div class="row">
                        <div class="main_features p-top-100">

                            <div class="gray-box">
                                <div class="title">
                                  <h2>确认订单</h2>
                                </div>
                                <!--内容-->
                                <div>
                                    <div class="order-info">
                                        <h3 style="color: gray;">支付体验，请填写支付信息</h3>
                                        <!--#5c81e3-->
                                        <p class="payment-detail" style="color: gray;">成功支付≥10.00￥系统自动将【最新ePay源码(含文档)及个人申请当面付教程】
                                            发至您的邮箱<a href="/dmf-detail" target="_blank"><h7>【当面付说明】</h7></a></p>
                                        <h5>
                                            <p style="margin-bottom: 20px;color: red;text-align: center;" >
                                                成功支付≥￥68.00系统自动将【微信小程序商城(含后台)】发至您的邮箱
                                            </p>
                                        </h5>
                                        <div class="pay-info">
                                            <div class="form">
                                                <div class="form-group">
                                                    <label for="nickName" class="control-label col-sm-3">昵称<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="nickName" name="nickName" maxlength="20" type="text" placeholder="请输入您的昵称"/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="money-choose" class="control-label col-sm-3">捐赠金额<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <select class="form-control" id="money-choose" style="color: #01b401;" onchange="chooseMoney()">
                                                            <option id="dmfTest" value="0.10" selected>￥0.10（当面付测试）</option>
                                                            <option value="1.00">￥1.00（支付测试）</option>
                                                            <option value="5.00">￥5.00（支付测试）</option>
                                                            <option value="10.00">￥10.00（含最新ePay及个人申请当面付教程）</option>
                                                            <option value="68.00">￥68.00（含小程序商城及后台源码）</option>
                                                            <option value="198.00">￥198.00(xboot源码,只用于学习)</option>
                                                            <option value="custom">自定义 随意撒钱</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group" id="custom-input" style="display: none">
                                                    <label for="money-choose" class="control-label col-sm-3">请输入金额<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="money" name="money" oninput="toMoney()" type="text" maxlength="20"
                                                               onblur="checkMoney(this)" placeholder="请确认您的支付金额(支持小数点后2位)"/>
                                                    </div>
                                                </div>
                                                <div class="form-group" id="email-input">
                                                    <label for="email" class="control-label col-sm-3">您的邮箱<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="email" name="email" type="text" maxlength="30" p
                                                               onblur="checkEmail(this)" laceholder="支付结果及源码将发送至您邮箱(推荐QQ邮箱)"/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="email" class="control-label col-sm-3">留言</label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="info" name="info" type="text" maxlength="50" placeholder="请输入您的留言内容"/>
                                                    </div>
                                                </div>
                                                <div class="form-group" id="test-input" style="display: none">
                                                    <label for="email" class="control-label col-sm-3" style="color:#5c81e3">体验审核邮箱</label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="testEmail" name="testEmail" type="text" maxlength="30" placeholder="填写后您作为假管理员将收到审核邮件"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pay-type">
                                            <div class="p-title">支付方式</div>
                                            <div class="pay-item">
                                                <!--当面付-->
                                                <div id="dmf" class="active" onclick="changeType(0)"><img src="assets/images/alipaydmf.png" alt="当面付"></div>
                                                <!--支付宝-->
                                                <div id="ali" class="" onclick="changeType(1)"><img src="assets/images/alipay@2x.png" alt="支付宝"></div>
                                                <!--支付宝点单-->
                                                <div id="dian" class="" onclick="changeType(5)"><img src="assets/images/diandan.png" alt="支付宝点单"></div>
                                                <!--微信支付-->
                                                <div id="wechat" class="" onclick="changeType(2)"><img src="assets/images/weixinpay@2x.png" alt="微信支付"></div>
                                                <!--QQ支付-->
                                                <div id="qq" class="" onclick="changeType(3)"><img src="assets/images/qqpay.png" alt="QQ支付"></div>
                                                <!--云闪付-->
                                                <div id="uni" class="" onclick="changeType(4)"><img src="assets/images/uni.png" alt="云闪付"></div>
                                            </div>
                                          </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="box-inner">
                                      <div>
                                        <span>
                                          应付金额：
                                        </span>
                                        <em><span>¥</span><em id="realMoney"></em></em>
                                        <input type="text" class="main-btn" value="立刻支付" onclick="submit()" id="submit" readonly>
                                      </div>
                                    </div>
                                </div>
                              </div>
                              <p style="color: red;font-size: 16px;text-align: center;">温馨提示：为减轻后台压力，支付失败的小伙伴将在次日10:00AM统一收到支付结果邮件通知</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- scroll up-->
            <div class="scrollup">
                <a href="#"><i class="fa fa-chevron-up"></i></a>
            </div>

            <div th:include="footer"/>

            <div th:include="common/modal" />
        </div>
    </body>
    <script type="text/javascript">
        $("[data-toggle='popover']").popover();

        $("#money-choose").val("10.00");
        var url = window.location.href;
        if(url.indexOf("xboot")>=0){
            $("#money-choose").val("198.00");
        }

        var nickName="",money="",email="",testEmail="",payType="DMF",picName="",info="",
            custom=false,mobile=false,DMF=false;
        // 支付时间倒计时
        var setTime=120;

        // 判断移动设备
        var useragent = navigator.userAgent.toLocaleLowerCase();
        if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|ucweb|rv:1.2.3.4|windows ce|windows mobile|midp/i.test(useragent)){
            mobile=true;
            // 判断移动设备 3分钟支付时间
            setTime=180;
        }
        //判断是否在微信打开
        isWeiChat(useragent);

        function check(){
            nickName=$("#nickName").val();
            money=$("#money").val();
            email=$("#email").val();
            testEmail=$("#testEmail").val();
            info = $("#info").val();

            var v = $("#money-choose").val();
            if(nickName=="" || nickName == null || nickName.length==0){
                showMsg('请填写昵称');
                return false;
            }
            if(email=="" || email==null || email.length ==0){
                showMsg('请填写昵称和邮箱，若邮箱填写错误您将无法收到支付结果');
                return false;
            }
            if(picName=="custom"){
                if(!isMoney(money)){
                    showMsg('请填写正确的金额（支持2位小数，金额不得低于1.00元）');
                    return false;
                }
            }
            if(!isEmail(email)&&v!="0.10"){
                showMsg('请填写正确的通知邮箱地址');
                return false;
            }
            if(testEmail!=""&&!isEmail(testEmail)){
                showMsg('请填写正确的体验管理员邮箱地址');
                return false;
            }
            return true;
        }

        function toMoney () {
            money=$("#money").val();
            if(money==""){
                $("#realMoney").html("0.00");
                return;
            }
            money = parseFloat(money);
            money = money.toFixed(2);
            money = money.toLocaleString();
            $("#realMoney").html(money);
            return money;
        }

        chooseMoney();

        function chooseMoney() {
            var v=$("#money-choose").val();
            picName=v;
            $.cookie('picName', v);

            if(v=="0.10"){
                $("#email-input").css("display", "none");
            }else{
                $("#email-input").css("display", "block");
            }

            if(v=="custom"){
                custom = true;
                $("#custom-input").css("display", "block");
            }else{
                custom = false;
                if(v==""){
                    $("#realMoney").html("0.00");
                    return;
                }
                v = parseFloat(v);
                v = v.toFixed(2);
                v = v.toLocaleString();
                $("#realMoney").html(v);
                money=v;

                $("#custom-input").css("display", "none");
            }
        }

        function changeType(v){
            $("#money-choose").val("10.00");
            chooseMoney();
            if(v==0){
                payType="DMF";
                $("#dmf").attr("class","active");
                $("#ali").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").removeAttr("class");
                $("#uni").removeAttr("class");
                $("#dian").removeAttr("class");
                $("#test-input").css("display", "none");
                $("#dmfTest").css("display", "block");
            }
            if(v==1){
                payType="Alipay";
                $("#ali").attr("class","active");
                $("#dmf").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").removeAttr("class");
                $("#uni").removeAttr("class");
                $("#dian").removeAttr("class");
                $("#test-input").css("display", "block");
                $("#dmfTest").css("display", "none");
            }else if(v==2){
                payType="Wechat";
                $("#ali").removeAttr("class");
                $("#dmf").removeAttr("class");
                $("#wechat").attr("class","active");
                $("#qq").removeAttr("class");
                $("#uni").removeAttr("class");
                $("#dian").removeAttr("class");
                $("#test-input").css("display", "block");
                $("#dmfTest").css("display", "none");
            } else if(v==3){
                payType="QQ";
                $("#ali").removeAttr("class");
                $("#dmf").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").attr("class","active");
                $("#uni").removeAttr("class");
                $("#dian").removeAttr("class");
                $("#test-input").css("display", "block");
                $("#dmfTest").css("display", "none");
            } else if(v==4){
                payType="UnionPay";
                $("#ali").removeAttr("class");
                $("#dmf").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").removeAttr("class");
                $("#uni").attr("class","active");
                $("#dian").removeAttr("class");
                $("#test-input").css("display", "block");
                $("#dmfTest").css("display", "none");
            } else if(v==5){
                payType="Diandan";
                $("#ali").removeAttr("class");
                $("#dmf").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").removeAttr("class");
                $("#uni").removeAttr("class");
                $("#dian").attr("class","active");
                $("#test-input").css("display", "block");
                $("#dmfTest").css("display", "none");
            }
        }

        function submit(){
            if(!check()){
                return;
            }
            if(picName=="custom"){
                money=$("#money").val();
            }else{
                money=picName;
            }
            $.cookie('money', money);
            $.cookie('time', setTime);

            // 支付宝风控 改为转账码 不支持固码
            if(payType=="Alipay"){
                custom=true;
                //$.cookie('picName', "custom");
            }

            $("#submit").attr("disabled","disabled");
            $("#submit").val("提交中...");
            if(payType=="DMF"){
                $.cookie('time', 300);
                $.ajax({
                    url:"/alipay/precreate",
                    type: 'POST',
                    data:{
                        nickName:nickName,
                        money:money,
                        email:email,
                        payType:payType,
                        info:info,
                        custom: custom,
                        mobile: mobile,
                        device: navigator.userAgent
                    },
                    success:function (data) {
                        if(data.success==true){
                            // 存入id和qrCode
                            $.cookie('payId', data.result.id);
                            $.cookie('qrCode', data.result.qrCode);
                            $("#submit").removeAttr("disabled");
                            $("#submit").val("立刻支付");
                            if(isAlipay()){
                                window.location.href=data.result.qrCode;
                            }else{
                                window.location.href="/dmf";
                            }
                        }else{
                            $("#submit").removeAttr("disabled");
                            $("#submit").val("立刻支付");
                            showMsg(data.message);
                        }
                    },
                    error:function(XMLHttpRequest){
                        if(XMLHttpRequest.status!=200){
                            $("#submit").removeAttr("disabled");
                            $("#submit").val("立刻支付");
                            alert('出错啦! 错误码:'+XMLHttpRequest.status);
                        }
                    }
                });
            }else{
                $.ajax({
                    url:"/pay/addPay",
                    type: 'POST',
                    data:{
                        nickName:nickName,
                        money:money,
                        email:email,
                        testEmail:testEmail,
                        payType:payType,
                        info:info,
                        custom: custom,
                        mobile: mobile,
                        device: navigator.userAgent
                    },
                    success:function (data) {
                        if(data.success==true){
                            // 存入num和id
                            $.cookie('payNum', data.result.payNum);
                            $.cookie('payId', data.result.id);
                            $("#submit").removeAttr("disabled");
                            $("#submit").val("立刻支付");
                            if(payType=="Alipay"){
                                //手机app打开
                                if(isAlipay()){
                                    window.location.href="alipays://platformapi/startapp?appId=20000067&url="+
                                        encodeURIComponent("http://5epay.cn/openAlipay?money="+money+"&num="+data.result.payNum+"&id="+data.result.id);
                                }else{
                                    //电脑端打开或者其他非手机设备打开链接
                                    window.location.href="/alipay";
                                }
                            }else if(payType=="Diandan"){
                                window.location.href="/diandan";
                            }else if(payType=="Wechat"){
                                window.location.href="/wechat";
                            }else if(payType=="QQ"){
                                window.location.href="/qqpay";
                            }else if(payType=="UnionPay"){
                                // 重新存入价格信息
                                $.cookie('money', money-Number(data.result.payNum)*0.1);
                                $.cookie('originPrice', money);
                                window.location.href="/unipay";
                            }
                        }else{
                            $("#submit").removeAttr("disabled");
                            $("#submit").val("立刻支付");
                            showMsg(data.message);
                        }
                    },
                    error:function(XMLHttpRequest){
                        if(XMLHttpRequest.status!=200){
                            $("#submit").removeAttr("disabled");
                            $("#submit").val("立刻支付");
                            alert('出错啦! 错误码:'+XMLHttpRequest.status);
                        }
                    }
                });
            }
        }

        /**
         * 信息框提示
         * @param m
         */
        function showMsg(m){
            $("#myModal").modal('show');
            $("#body").html(m);
        }

        // 判断是否支付宝内打开
        function isAlipay() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.indexOf("alipay")>=0) {
                return 1;
            }
            return 0;
        }

        function isWeiChat(useragent) {
            if(useragent.match(/MicroMessenger/i) == 'micromessenger'){
                $(".wx-tip").css("display","block");
                return false;
            }else{
                $(".wx-tip").css("display","none");
            }
        }

        //关闭微信提示
        function closeTip() {
            $(".wx-tip").hide();
        }

        function checkMoney(obj) {
            var value = $(obj).val();
            if(!isMoney (value)){
                showMsg('请填写正确的金额（支持小数点后2位）');
                $(obj).val("");
                return false;
            }
        }

        function checkEmail(obj) {
            var value = $(obj).val();
            if(!isEmail (value)){
                showMsg('请填写正确的邮箱（否则收不到支付结果）');
                return false;
            }
        }
        function isMoney (v) {
            if(v==""||v==null||v<1){
                return false;
            }
            var regu = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            var re = new RegExp(regu);
            if (re.test(v)) {
                return true;
            } else {
                return false;
            }
        }
        function isEmail (v) {
            var regu = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
            var re = new RegExp(regu);
            if (re.test(v)) {
                return true;
            } else {
                return false;
            }
        }

    </script>
</html>
